<template>
    <div class="system-params-container layout-padding">
        <div class="system-params-padding layout-padding-auto layout-padding-view">
            <div class="system-user-search mb15">
                <el-input v-model="state.dataForm.paramsName" size="default" placeholder="请输入参数名称"
                          style="max-width: 180px"></el-input>
                <el-button size="default" type="primary" class="ml10" @click="state.getDataList()">
                    <el-icon>
                        <ele-Search/>
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="paramsDialogRef.openDialog('add')">
                    <el-icon>
                        <ele-FolderAdd/>
                    </el-icon>
                    新增
                </el-button>
            </div>
            <el-table :data="state.dataList" v-loading="state.dataListLoading" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center"/>
                <el-table-column prop="paramName" label="参数名称" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="paramType" label="参数类型" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="paramKey" label="参数键" align="center"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="paramValue" label="参数值"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-button size="small" text type="primary"
                                   @click="paramsDialogRef.openDialog('edit', scope.row.id)"
                        >修改
                        </el-button
                        >
                        <el-button size="small" text type="primary"
                                   @click="state.deleteHandle(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="state.page" :page-size="state.limit"
                           :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                           class="mt15"
                           @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"/>
        </div>
        <paramsDialog ref="paramsDialogRef" @refresh="state.getDataList()"/>
    </div>
</template>

<script setup lang="ts" name="systemParams">
import {defineAsyncComponent, reactive, ref, toRefs} from 'vue';
import ApiConfig from "/@/api/ApiConfig";
import useView from "/@/hooks/useView";

// 引入组件
const paramsDialog = defineAsyncComponent(() => import('/@/views/system/params/dialog.vue'));

// 定义变量内容
const paramsDialogRef = ref();

const view = reactive({
    getDataListURL: ApiConfig.SYSTEM.PARAMS_PAGE,
    getDataListIsPage: true,
    deleteURL: ApiConfig.SYSTEM.params,
    deleteIsBatch: true,
    dataForm: {
        paramsName:''
    },
    configVisible: false,
    uploadVisible: false
});

const state = reactive({...useView(view), ...toRefs(view)});

</script>

<style scoped lang="scss">
.system-params-container {
  .system-params-padding {
    padding: 15px;

    .el-table {
      flex: 1;
    }
  }
}
</style>
